<template>
    <div class="container">
        <div class="banner white">
            <van-image
                    width="21rem"
                    height="8.59rem"
                    src="http://www.deweiyi.com/data/afficheimg/20190811jrunkh.jpg"
            ></van-image>

        </div>
        <div class="static white">
            <div class="block">
                <span class="icon"><van-icon name="friends-o" /></span>
                <span>报名人数</span>
                <span>666</span>
            </div>
            <div class="block">
                <span class="icon"><van-icon name="coupon-o" /></span>
                <span>累计票数</span>
                <span>10000</span>
            </div>
            <div class="block">
                <span class="icon"><van-icon name="chart-trending-o" /></span>
                <span>累积访问</span>
                <span>1000</span>
            </div>
        </div>
        <div class="countdown white">
            <span class="head">距投票结束还有</span>
            <div class="count">
                <van-count-down
                        :time="time"
                        format="DD 天 HH 时 mm 分 ss 秒"
                >
                    <template v-slot="timeData">
                        <span class="item">{{ timeData.days }} 天</span>
                        <span class="item">{{ timeData.hours }} 时</span>
                        <span class="item">{{ timeData.minutes }} 分</span>
                        <span class="item">{{ timeData.seconds }} 秒</span>
                    </template>
                </van-count-down>
            </div>

        </div>
        <div class="rank-list white">
            <div class="tab">排行榜</div>
            <div class="list">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text=""
                        @load="onLoad"
                >
                    <div class="van-cell__value tab2">
                        <span class="rank">排名</span>
                        <span>选手</span>
                        <span>选手号</span>
                        <span>票数</span>
                    </div>
                    <van-cell
                            v-for="(item,index) in list"
                            :key="item.number"
                    >
                        <span class="rank"><img v-if="index ==0" src="@/assets/NO1@2x.png"
                                   style="width: 1.77rem;height: 1.77rem;margin-right: 0.234rem" alt="">
                            <img v-else-if="index ==1" src="@/assets/NO2@2x.png"
                                 style="width: 1.77rem;height: 1.77rem;margin-right: 0.234rem" alt="">
                            <img v-else-if="index ==2" src="@/assets/NO3@2x.png"
                                 style="width: 1.77rem;height: 1.77rem;margin-right: 0.234rem" alt="">
                            <span  v-else >{{index + 1}}</span></span>
                        <span>{{item.name}}</span>
                        <span>{{item.number}}</span>
                        <span>{{item.ticket}}</span>

                    </van-cell>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        Image,
        Button,
        CountDown,
        List,
        Cell, CellGroup,
        Icon
    } from 'vant'
    export default {
        name: "rank",
        components: {
            [Image.name]: Image,
            [Button.name]: Button,
            [CountDown.name]: CountDown,
            [List.name]: List,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Icon.name]: Icon,
        },
        data() {
            return {
                list: [
                    {
                        "rank": 1,
                        "name": "aqie",
                        "number" : "001",
                        "ticket": "100"
                    },
                    {
                        "rank": 1,
                        "name": "aqie",
                        "number" : "001",
                        "ticket": "100"
                    },
                    {
                        "rank": 1,
                        "name": "aqie",
                        "number" : "001",
                        "ticket": "100"
                    },
                    {
                        "rank": 1,
                        "name": "aqie",
                        "number" : "001",
                        "ticket": "100"
                    },
                    {
                        "rank": 1,
                        "name": "aqie",
                        "number" : "001",
                        "ticket": "100"
                    },
                ],
                loading: false,
                finished: false,
                time: 30 * 60 * 60 * 1000
            };
        },

        methods: {
            onLoad() {
                // 异步更新数据
                setTimeout(() => {
                   /* for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }*/
                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 3) {
                        this.finished = true;
                    }
                }, 500);
            }
        }
    }
</script>

<style scoped lang="scss">
    .container {
        // 23.4375
        width: 22.23rem;
        padding: 0.8rem 0.6rem;
        display: flex;
        flex-direction: column;
        background-color: #e9e9e9;
        color: #666;
    }
    .white {
        background-color: white;
        margin-bottom: 1rem;
        border-radius: 0.2rem;
    }
    .static {
        height: 6.875rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        .block {
            width: 5.3rem;
            height: 5.3rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: medium;
            color: #333;
            font-weight: bold;
        }
        .icon{
            font-size: 1.8rem;
            color: #1989fa;
        }
    }
    .countdown {
        height: 5.34rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0rem;
        .head {
            font-size: 1.6rem;
            font-weight: 600;
            font-family: "Microsoft YaHei UI",serif;
        }
        .item {
            padding: 0.3rem 0;
            display: inline-block;
            width: 3rem;
            margin-right: 0.5rem;
            color: #fff;
            font-size: 1rem;
            text-align: center;
            background-color: #1989fa;
            border-radius: 0.2rem;
        }
    }
    .rank-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        .tab {
            font-size: 1.2rem;
            font-weight: 600;
            margin: 0.3rem 0;
        }
        .list {
            width: 20rem;
            padding: 0 0.5rem;
            span {
                width: 3rem;
            }
            .tab2 {
                padding-bottom: 0;
                text-align: center;
                line-height: 2.5rem;
                span {
                    padding: 0rem 1rem;
                }
            }
            .van-cell__value{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }
            .rank {
                width: 3rem;
                height: 2.5rem;
                text-align: center;
            }
        }
    }
</style>
